<template>
  <div class="tab_home">
<!--    <div class="help-title">-->
<!--      常见问题-->
<!--    </div>-->
    <van-nav-bar
      title="常见问题"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!--四个问题-->
    <!--1-9 三个列表-->
    <div class="help-container">
      <ul>
        <!--每个li由问题标题和文字描述组成-->
        <li>
          <div class="help-question">
              <div class="question">Q:基因检测安全吗</div>
              <div class="question-describe">我们是与中科院合作，所有检测报告都经过中科院认证，安全可靠，信息保密</div>
          </div>
        </li>
        <li>
          <div class="help-question">
            <div class="question">Q:基因检测安全吗</div>
            <div class="question-describe">我们是与中科院合作，所有检测报告都经过中科院认证，安全可靠，信息保密</div>
          </div>
        </li>
        <li>
          <div class="help-question">
            <div class="question">Q:基因检测安全吗</div>
            <div class="question-describe">我们是与中科院合作，所有检测报告都经过中科院认证，安全可靠，信息保密</div>
          </div>
        </li>
        <li>
          <div class="help-question">
            <div class="question">Q:基因检测安全吗</div>
            <div class="question-describe">我们是与中科院合作，所有检测报告都经过中科院认证，安全可靠，信息保密</div>
          </div>
        </li>

        <svg width="100%" height="100%" version="1.1"
             xmlns="http://www.w3.org/2000/svg">
          <line x1="0" y1="0" x2="800" y2="0" style="stroke :rgb(255,0,0);stroke-width:5"stroke-dasharray="20,40" />
          <line x1="30" y1="0" x2="800" y2="0" style="stroke :deepskyblue;stroke-width:5"stroke-dasharray="20,40" />
        </svg>
      </ul>
    </div>
  </div>
</template>

<script>
import { NavBar  } from 'vant'
export default {
  components: {
    [NavBar.name]: NavBar
  },
  data () {
    return {}
  },
  methods: {
    // 返回上一页的方法
    onClickLeft () {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped lang="less">
.help-title{
  position: relative;
  text-align: center;
  width: 100%;
  /*height: 20%;*/
  height: 40px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: 600;
  font-size: large;
}
.help-container{
  margin: 0 15px 20px;
  width: 92%;
  li{
    /*padding: 10px;*/
    width: 100%;
    height: 70px;
    /*margin-bottom: 10px;*/
    border-bottom:0.05rem solid #f2f3f5;//画一条分界线
  }
  /*整行li*/
  .help-question{
    width: 100%;
    height: 70px;
    float: left;
  }
  /*li的文字*/
  /*.li-font{*/
  /*  !*margin: 8px;*!*/
  /*  float: left;*/
  /*  width: 100%;*/
  /*}*/
  /*li标题*/
  .question{
    color: deepskyblue;
    height: 30%;
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 5px;
    margin-left: 8px;
  }
  .question-describe{
    color: #969799;
    height: 70%;
    font-size: 13px;
    /*margin-bottom: 5px;*/
    padding-left: 25px;
  }
}
</style>
